<template>
  <transition name="fade">
    <div v-if="show" class="overlay" @click="$emit('click')"></div>
  </transition>
</template>

<script setup lang="ts">
  defineProps<{
    show: boolean
  }>()

  defineEmits<{
    (e: 'click'): void
  }>()
</script>

<style scoped>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>
